<template>
    <div class="m-GenBox">
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">字体倾斜 折线平滑 单条分段  </div>
                <div class="cardMain">
                    <u-lineEchart 
                        :keyId="'third1'"
                        :legend="legendList1" :list="list1" :markVal="3.5" :yAxisName="'评价指数'" :xAxisName="'负担值'" smooth hasDiff isHasScatter>
                    </u-lineEchart>
                </div>
            </div>
        </div>
        
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">字体不倾斜 折线不平滑 </div>
                <div class="cardMain">
                    <u-lineEchart 
                        :keyId="'third2'" 
                        :legend="legendList2" :list="list2" fontNomal hasDiff isHasScatter>
                    </u-lineEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">不显示标签 </div>
                <div class="cardMain">
                    <u-lineEchart 
                        :keyId="'third3'" 
                        :legend="legendList3" :list="list3" disLegend>
                    </u-lineEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">两端</div>
                <div class="cardMain">
                    <u-lineEchart 
                        :keyId="'third4'" 
                        :legend="legendList4" :list="list4" smooth isHasScatter>
                    </u-lineEchart>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Linep',
    data(){
        return{
            legendList1:[
                {name:'学校创新发展',key:1,color:'#fdb628',areaStyleColor:"#fdb628"},
                {name:'教师专业能力',key:2,color:'#6374f7'},
                {name:'需关注',min:0,max:2,color:'#ff7b12',isSign: true},
            ],
            list1:[
                {name:"学生特质",key:1,value:[4]},
                {name:"教师行为",key:1,value:[2.5]},
                {name:"领导风格",key:1,value:[2]},
                {name:"学校环境",key:1,value:[1]},
                {name:"师德修养",key:2,value:[3.5]},
                {name:"学生特质3",key:2,value:[4]},
                {name:"学生特质4",key:2,value:[4.6]},
            ],
            legendList2:[
                {name:'钱塘新区',key:1,color:'#4ca0ff',isSign: true,areaStyleColor:"#00cd86"},
                {name:'正常',key:2,color:'#00cd86'},
                {name:'需关注',min:0,max:2,color:'#ff7b12',isSign: true},
            ],
            list2:[
                {name:"钱塘新区",key:1,value:[4]},
                {name:"教师行为",key:2,value:[2.5]},
                {name:"领导风格",key:2,value:[2]},
                {name:"学校环境",key:2,value:[1]},
                {name:"师德修养",key:2,value:[3.5]},
                {name:"学生特质3",key:2,value:[4]},
                {name:"学生特质4",key:2,value:[4.6]},
            ],
            legendList3:[
                {name:'正常',color:'#00cd86'},
            ],
            list3:[
                {name:"教师行为",value:[2.5]},
                {name:"领导风格",value:[2]},
                {name:"学校环境",value:[1]},
                {name:"师德修养",value:[3.5]},
                {name:"学生特质3",value:[4]},
                {name:"学生特质4",value:[4.6]},
            ],
            legendList4:[
                {name:'小学',color:'#4ca0ff',areaStyleColor:"#4ca0ff"},
                {name:'初中',color:'#00cd86',areaStyleColor:"#00cd86"},
                {name:'需关注',min:0,max:2,color:'#ff7b12',isSign: true},
            ],
            list4:[
                {name:"教师行为",value:[2.5,3]},
                {name:"领导风格",value:[2,2]},
                {name:"学校环境",value:[1,4]},
                {name:"师德修养",value:[3.5,5]},
                {name:"学生特质3",value:[4,2.1]},
                {name:"学生特质4",value:[4.6,1.5]},
            ],
        }
    },
    created(){
        this.getInit()
    },
    mounted(){
    },
    methods:{
        getInit(){
            
        },
        getChart(){

        },

    },
}
</script>
<style lang="scss" scoped>
.u-cardBox {
    &.first{
        width: 504px; height: 440px;
        .group{
            display: flex;
            justify-content: space-between;
            text-align: center;
        }
        .progressBox{
            width: 33.33%;
            .name{
                font-size: 16px; color: #747e93;
                margin-top: 22px;
            }
        }
    }
    &.second{
        flex: 1; height: 440px;
        display: flex;
        flex-direction: column;
        margin-left: 24px;
        .cardMain{
            width: 100%;
            flex: 1;
        }
    }
    &.third{
        flex: 1; height: 480px;
        display: flex;
        flex-direction: column;
        .cardMain{
            width: 100%;
            flex: 1;
        }
    }
}
</style>
